#id-main-container{
  position: relative;
  width: 98%;
  height: 96.7%;
  border: 2px solid #cccccc;
  padding: 10px;
}

#id-assistant-container{
  z-index: 2;
  position: relative;
  width: 100%;
  height: 100%;
}

/*flex属性是将其子组件弄在同一行，除此之外还有grid也可以达到同样的效果，只是各有利弊，第二种更适用于复杂框架*/
#id-one-container{
  display: flex;
  position: relative;
  width: 100%;
  height: 6%;
  padding: 4px;
}

#id-button-container{
  position: relative;
  width: 140px;
  height: 100%;
  padding: 4px;
}

#id-search-container{
  display: flex;
  position: relative;
  width: 950px;
  height: 78%;
  border: 1px solid #cccccc;
  background-color: white;
  left: 4px;
  padding: 4px;
}

#id-table-container{
  position: relative;
  width: 100%;
  height: 88%;
}

#id-page-container{
  position: relative;
  width: 100%;
  height: 5%;
}

/*弹窗容器*/
#id-dialog-container {
  z-index: 1;
  position: relative;
  width: 100%;
  height: 100%;
  top: -100%;
}

/*弹框*/
.id-dialog {
  z-index: 1;
  position: relative;
  width: 840px;
  height: 600px;
  border: 2px solid #cccccc;
  background-color: rgba(255, 255, 254, 1); /* 0.9 表示 90% 的不透明度 */
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
}
